<template>
	<view class="content"> 
		<view v-if="hasLogin" class="hello">
			<view class="title">
				您好 {{userInfo.username}}，您已成功登录。 
			</view>
			<view class="ul">
				<button class="login-out" v-if="hasLogin" type="default" @tap="bindLogout">退出登录</button>
			</view>
		</view> 
		<view v-if="!hasLogin" class="hello">
			<view class="title">
				您好，请先登录。
				<view class="ul">
					<button type="default" @tap="togglePopup">登录</button>
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<uni-popup ref="showLoginModel" type="center" :mask-click="false">
			<view class="uni-tip">
				<text class="uni-tip-title">温馨提示</text>
				<text class="uni-tip-content" style="text-align: center;">请登录后再继续</text>
				<view class="uni-tip-group-button">
					<button class="uni-tip-button" type="default" @tap="cancel">取消</button>
					<button class="uni-tip-button" type="primary" @tap="goLogin">前往登录</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import { mapState, mapMutations } from 'vuex'
	
	export default {
		components: { uniPopup },
		data() {
			return {}
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'userInfo']),
		onLoad() {
			let vm = this
			
		},
		methods: {
			...mapMutations(['logout','login']),
			goLogin(){
				/**
				 * 如果需要强制登录，使用reLaunch方式
				 */
				if (this.forcedLogin) {
					uni.reLaunch({ url: '/pages/user/login' });
				} else {
					uni.navigateTo({ url: '/pages/user/login' });
				}
			},
			togglePopup() {
				this.$nextTick(() => {
					this.$refs['showLoginModel'].open()
				})
			},
			cancel() {
				this.$nextTick(() => {
					this.$refs['showLoginModel'].close()
				})
			},
			bindLogout() {
				this.logout();
			}
		}
	}
</script>

<style>
	.hello {
		display: flex;
		flex: 1;
		flex-direction: column;
	}
	.title {
		color: #8f8f94;
		margin-top: 25px;
	}
	.ul {
		font-size: 15px;
		color: #8f8f94;
		margin-top: 25px;
	}
	.ul>view {
		line-height: 25px;
	}
	.popup-box{
		width: 66%;
		margin: 0 auto;
		text-align: center;
	}
	.popup-content {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		background-color: #fff;
		padding: 15px;
		font-size: 14px;
	}
	/* 提示窗口 */
	.uni-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		padding: 15px;
		width: 300px;
		background-color: #fff;
		border-radius: 10px;
	}
	.uni-tip-title {
		margin-bottom: 10px;
		text-align: center;
		font-weight: bold;
		font-size: 16px;
		color: #333;
	}
	.uni-tip-content {
		/* padding: 15px; */
		font-size: 14px;
		color: #666;
	}
	.uni-tip-group-button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		margin-top: 20px;
	}
	.uni-tip-button {
		flex: 1;
		text-align: center;
		font-size: 14px;
	}
	.entry{
		padding: 20rpx;
		display: inline-block;
		color: #0088f4;
	}
	.ul .login-out{
		background-color:#f1f1f1;
	}
</style>
